<template>
  <div id="borrow">
    
    <ul class="title">
      <li :class="{'active':titleFlag}" @click="moneyHannle">钱钱智投</li>
      <li :class="{'active':!titleFlag}" @click="goldHannle">金鹅宝</li>
    </ul>
    <!-- 公告 -->
    <div class="gonggao">
      <span></span>
      <ul ref="news">
        <li v-for="(item,index) in msgList" :key="index" v-text="item"></li>
      </ul>
    </div>
    <router-view></router-view>
    <div class="page">
      <span class="disabled"></span>
      <span></span>
    </div>
  </div>
</template>

<script>

export default {
  name: "",
  data() {
    return {
      titleFlag: true,
      msgList: [
        "2019-05-12出借人150****3378出借金鹅宝1194号1000.00元",
        "2019-05-16出借人186****2444出借金鹅宝1202号10000.00元",
        "2019-05-12出借人187****8998出借金鹅宝1194号50000.00元",
        "2019-05-12出借人159****9523出借金鹅宝1192号10000.00元",
        "2019-05-12出借人159****9523出借金鹅宝1193号19000.00元",
        "2019-05-12出借人187****8998出借金鹅宝1193号50000.00元"
      ],
      current: 0,
      timer:null
    };
  },
  mounted() {
    this.bannerTxt();
    if(this.$route.path==='/borrow/jeb'){
      this.titleFlag = false;
    }
  },
  methods: {
    moneyHannle() {
      this.titleFlag = true;
      this.$router.push({
        path:'/borrow/qqzt',
        query:{page:1}
      })
    },
    goldHannle() {
      this.titleFlag = false;
      this.$router.push({
        path:'/borrow/jeb',
        query:{page:1}
      })
    },
    bannerTxt() {
      this.timer = setInterval(() => {
        if(!this.$route.path.includes('/borrow')){
          clearInterval(this.timer);
          return false;
        }
        this.current -= 10;
        this.$refs.news.style.transform = `translateX(${this.current}px)`;
        let liNodeWidth = this.$refs.news.children[0].offsetWidth;
        if(Math.abs(this.current)>=this.$refs.news.offsetWidth-liNodeWidth){
          this.current = 1;
        
        }
      }, 150);
    }
  }
};
</script>

<style lang='scss' scoped>
#borrow {
  padding-top: 0.42rem;
}
.title {
  display: flex;
  background: #ffffff;
  & > li {
    width: 50%;
    color: #444444;
    border-bottom: 2px solid #ffffff;
    text-align: center;
    line-height: 0.32rem;
    height: 0.32rem;
    font-size: 0.15rem;
  }
  .active {
    color: #1e93ff;
    border-bottom: 2px solid #1e93ff;
  }
}
.gonggao {
  height: 0.3rem;
  width: 100%;
  overflow: hidden;
  padding-left:0.33rem;
  position: relative;
  & > span {
    background: #f3f8fc url("../../public/images/notice.png") no-repeat 0.09rem
      center;
    background-size: 0.24rem 0.24rem;
    display: block;
    width: 0.33rem;
    height: 0.3rem;
    position: absolute;
    z-index: 55;
    left: 0px;
    top:0px

  }
  & > ul {
    line-height: 0.3rem;
    overflow: hidden;
    width: 600%;
    height: 100%;
    background: #F3F8FC;
    & > li {
      height: 100%;
      float: left;
      font-size: 0.12rem;
      color: #444f4f;

      width: 16.66666%;
      &:nth-of-type(1) {
        margin-left: 0px;
      }
    }
  }
}
.page{
  display: flex;
  justify-content: center;
  margin-top: 0.15rem;
  &>span{
    margin-right: 0.06rem;
    width: 0.3rem;
    height: 0.23rem;
    border:1px solid #BEC0C2;
    border-radius: 0.05rem;
    &:nth-of-type(1){
      background:url('../../public/images/prev.png') no-repeat center center;
    }
    &:nth-of-type(2){
      background: url('../../public/images/next.png') no-repeat center center;
    }
  }
}
.disabled{
    opacity: 0.5;
}
</style>